<template>
  <div>
    <a-card :bordered="false" :body-style="{ padding: '0' }">
      <div class="salesCard">
        <a-tabs
          :activeKey="activeKey"
          type="editable-card"
          @edit="onEdit"
          size="large"
          @change="tabClick"
          :tab-bar-style="{ marginBottom: '24px', paddingLeft: '16px', paddingRight: '16px' }">
          <a-tab-pane v-for="pane in panes" :key="pane.key" :tab="pane.title" :closable="pane.closable">
            <tabsContent ref="tabsPane"></tabsContent>
          </a-tab-pane>
        </a-tabs>
      </div>
    </a-card>
  </div>
</template>
<script>
import tabsContent from './tabsContent'

export default {
  components: { tabsContent },
  data () {
    return {
      activeKey: '0',
      panes: [
        { title: '预测分析', key: '0', closable: false }
      ],
      newTabIndex: 0
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.panes.forEach((item, index) => {
        if (this.activeKey == index) {
          this.$refs.tabsPane[index].setContainerId(index)
        }
      })
    })
  },
  methods: {
    tabClick (index) {
      this.activeKey = index
      console.log(this.activeKey)
      this.$nextTick(() => {
        this.panes.forEach((item, index) => {
          if (this.activeKey == index) {
            this.$refs.tabsPane[index].setContainerId(index)
          }
        })
      })
    },
    onEdit (targetKey, action) {
      if (action === 'add') {
        this.add()
      } else {
        this.remove(targetKey)
      }
    },
    add () {
      const TabVal = `预测分析${++this.newTabIndex}`
      this.panes.push({
        title: TabVal,
        key: this.newTabIndex,
        closable: true
      })
    },
    remove (targetKey) {
      let lastIndex = 0
      this.panes.forEach((pane, i) => {
        if (pane.key === targetKey) {
          lastIndex = i - 1
        }
      })
      this.panes = this.panes.filter(pane => pane.key !== targetKey)
      if (this.panes.length && this.activeKey === targetKey) {
        if (lastIndex >= 0) {
          this.activeKey = this.panes[lastIndex].key
        } else {
          this.activeKey = this.panes[0].key
        }
      }
    }
  }
}
</script>

<style scoped lang="less" >
.extra-wrapper {
  line-height: 55px;
  padding-right: 24px;
  display: flex;
  align-items: center;
  //justify-content: center;
  width: 100%;
  flex-wrap: wrap;
  padding: 0 20px;

  .extra-item {
    display: inline-block;
    margin-right: 24px;
    display: flex;
    align-items: center;
  }

  .extra-item-active:before {
    vertical-align: middle; //加上星号会上下居中，不加会在上角展示
    content: '*';
    color: rgba(255, 59, 48, 1);
    font-size: 26px;
  }
}
</style>
